<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Rainbond Static Demo</title>

    <meta
      name="description"
      content="Rainbond（云帮）是一款以应用为中心的开源PaaS，深度整合基于Kubernetes的容器管理、Service Mesh微服务架构最佳实践、多类型CI/CD应用构建与交付、多数据中心资源管理等技术，为用户提供云原生应用全生命周期解决方案，构建应用与基础设施、应用与应用、基础设施与基础设施之间互联互通的生态体系，满足支撑业务高速发展所需的敏捷开发、高效运维和精益管理需求。"
    />

    <meta name="author" content="goodrain" />

    <meta property="og:title" content="Rainbond Static Demo" />
    <meta
      property="og:description"
      content="Rainbond（云帮）是一款以应用为中心的开源PaaS，深度整合基于Kubernetes的容器管理、Service Mesh微服务架构最佳实践、多类型CI/CD应用构建与交付、多数据中心资源管理等技术，为用户提供云原生应用全生命周期解决方案，构建应用与基础设施、应用与应用、基础设施与基础设施之间互联互通的生态体系，满足支撑业务高速发展所需的敏捷开发、高效运维和精益管理需求。"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="/" />
    <meta property="og:updated_time" content="2017-03-02T21:56:55&#43;01:00" />

    <link
      href="https://cdn.bootcss.com/jquery-jsonview/1.2.3/jquery.jsonview.css"
      rel="stylesheet"
    />
     <link href="{{ request.script_root }}/static/css/font.css" rel="stylesheet" type="text/css">
  <link href="{{ request.script_root }}/static/css/kube.min.css.css" rel="stylesheet" type="text/css">
  <link href="{{ request.script_root }}/static/css/kube.legenda.css" rel="stylesheet" type="text/css">
  <link href="{{ request.script_root }}/static/css/highlight.css" rel="stylesheet" type="text/css">
  <link href="{{ request.script_root }}/static/css/master.css" rel="stylesheet" type="text/css">
  <link href="{{ request.script_root }}/static/css/kube.demo.css" rel="stylesheet" type="text/css">

 <link href="{{ request.script_root }}/static/css/custom.css" rel="stylesheet" type="text/css">
     <link
      href="https://cdn.bootcss.com/jquery-jsonview/1.2.3/jquery.jsonview.css"
      rel="stylesheet"
    />
  </head>

  <body class="page-kube">
    <header>
      <div class="hide-sm" id="top">
        <div id="top-brand">
          <a href="/" target="_blank" title="home">Rainbond</a>
        </div>
        <nav id="top-nav-main">
          <ul>
            <li>
              <a href="https://github.com/goodrain/rainbond" target="_blank"
                >Github</a
              >
            </li>

            <li>
              <a
                href="https://www.rainbond.com/docs/stable/user-manual/app-creation/language-support/python.html"
                target="_blank"
                >Docs</a
              >
            </li>

            <li>
              <a
                href="/mysql"
                target="_blank"
                >MySQL示例</a
              >
            </li>
            <li>
              <a
                href="/sample"
                target="_blank"
                >API示例</a
              >
            </li>
          </ul>
        </nav>
        <nav id="top-nav-extra">
          <ul>
            <li>
              <a href="https://console.goodrain.com" target="_blank"
                >试用公有云</a
              >
            </li>
          </ul>
        </nav>
      </div>
    </header>
    <main>
      <div id="main">
        <div class="row col-12">
            <div class="form-item" style="width:60%;display: flex;margin-bottom: 1rem">
                <label style="width:10%;line-height: 35px">URL <span >：</span></label>
                <select style="width:13%;border-radius: 0" id="method">
                  <option value="get">get</option>
                  <option value="post">post</option>
                  <option value="delete">delete</option>
                  <option value="put">put</option>
                </select>
                <input type="text" style="border-radius: 0" id="api_url">
            </div>

            <div class="form-item" style="width:60%;display: flex;margin-bottom: 1rem">
                <label style="width:8%;line-height: 35px">参数 <span >：</span></label>
                <input type="text" style="width:30%" value="username" disabled>
                &nbsp;<span style="line-height:35px" >=</span>&nbsp;
                  <input type="text"  style="width:30%" id="username">
            </div>
            <div class="form-item" style="width:60%;display: flex;margin-left: 5%;margin-bottom: 1rem">
                <input type="text"  style="width:30%" value="password" disabled>
                &nbsp;<span style="line-height:35px">=</span>&nbsp;
                  <input type="text"  style="width:30%" id="password">
            </div>
            <!-- <div class="form-item" style="width:60%;display: flex;margin-left: 5%;margin-bottom: 1rem">
                <input type="email"  style="width:30%" value="username" disabled>
                &nbsp;<span style="line-height:35px">=</span>&nbsp;
                  <input type="email"  style="width:30%"  id="c">
            </div> -->
        </div>
        <div class="row col-12" style="margin-left: 5%;margin-bottom: 1rem">
            <div class="col col-2">
                <button class="button small" onclick="handleClick()">Submit</button>
              </div>
        </div>
        <div
          class="row col-12"
          id="json"
          style="border: 1px solid #3794de;min-height: 250px;border-radius: 2px"
        ></div>
      </div>
    </main>
    <footer id="footer">
      <nav>
        <ul>
          <li><span>Rainbond</span></li>
        </ul>
      </nav>
      <p>&copy; Licence Apache.</p>
    </footer>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/kube/6.5.2/js/kube.min.js"></script>
    <script src="https://cdn.bootcss.com/tocbot/4.5.0/tocbot.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-jsonview/1.2.3/jquery.jsonview.js"></script>
    <script>
      $(function() {
        handleClick = () => {
          let apiUrl = $('#api_url').val();
          var method = $('#method').val();
          var username = $('#username').val();
          var password = $('#password').val();
          var flag = apiUrl && method;
          var href = window.location.href.split('/sample');
            if(!flag){
                $("#json").JSONView('{"msg": "please enter a valid API", "msg_show": "请输入有效api或参数!"}')
                return;
            }
          $.ajax({
            method: 'post',
            // headers: {
            //   Authorization: `GRJWT ${getCookie("token")}`
            // },
            url: href[0]+'/api',
            data: JSON.stringify({
              payload:{
                'user_name':username,
                'password': password
              },
              method: method,
              url: apiUrl
            }),
            cache: false,
            success: data => {
              $("#json").JSONView(data);
            },
            error:err=>{
              $("#json").JSONView('{"msg": "the server responded with a status of 404 (Not Found)", "msg_show": "服务器的响应状态为404(未找到)"}');
            }
          });
        };
      });
    </script>
  </body>
</html>
